class StatusMonitor {
  constructor(socket) {
      this.socket = socket;
      this.connectionStatus = document.getElementById('connection-status');
      this.navigationStatus = document.getElementById('navigation-status');
      this.batteryIndicator = document.getElementById('battery-level');
      this.cpuUsage = document.getElementById('cpu-usage');
      this.memoryUsage = document.getElementById('memory-usage');
      
      this.initSocketHandlers();
  }
  
  initSocketHandlers() {
      // 连接状态
      this.socket.on('connect', () => {
          this.updateConnectionStatus('connected', 'Connected');
      });
      
      this.socket.on('disconnect', () => {
          this.updateConnectionStatus('disconnected', 'Disconnected');
      });
      
      this.socket.on('connect_error', () => {
          this.updateConnectionStatus('error', 'Connection Error');
      });
      
      // 导航状态
      this.socket.on('navigation_status', (status) => {
          this.navigationStatus.textContent = status.message;
          this.navigationStatus.className = `status-${status.state}`;
      });
      
      // 系统状态
      this.socket.on('system_status', (status) => {
          this.batteryIndicator.style.width = `${status.battery}%`;
          this.batteryIndicator.textContent = `${status.battery}%`;
          this.cpuUsage.textContent = `${status.cpu_usage}%`;
          this.memoryUsage.textContent = `${status.memory_usage}%`;
      });
  }
  
  updateConnectionStatus(state, message) {
      this.connectionStatus.textContent = message;
      this.connectionStatus.className = `status-${state}`;
  }
}